<template>
  <a-modal title="图书详细信息"
           @cancel="modelClose"
           :footer="null"
           v-model="scenicVisiable"
           width="70%"
           :destroyOnClose="true"
           :forceRender="true"
           :maskClosable="true">

    <a-row type="flex" justify="space-around">
      <a-col :span="6">
        <a-card hoverable>
          <img
            alt="example"
            :src="scenicData.image"
            slot="cover"
          />
          <template class="ant-card-actions" slot="actions">
            <a-icon type="setting" />
            <a-icon type="edit" />
            <a-icon type="ellipsis"/>
          </template>
        </a-card>
      </a-col>
    </a-row>

    <div style="margin-top: 50px">
      <a-divider />
      <a-row type="flex" justify="space-around">
        <a-col :span="6">ISBN号：{{scenicData.isbn}}</a-col>
        <a-col :span="4">作品名称：{{scenicData.title}}</a-col>
        <a-col :span="4">作者：{{scenicData.author}}</a-col>
        <a-col :span="4">评分人数：{{scenicData.numraters}}</a-col>
      </a-row>
      <a-divider />
      <a-row type="flex" justify="space-around">
        <a-col :span="6">评分：{{scenicData.average}}</a-col>
        <a-col :span="4">包装类型：{{scenicData.binding}}</a-col>
        <a-col :span="4">出版社：{{scenicData.publisher}}</a-col>
        <a-col :span="4">原著：{{scenicData.originTitle}}</a-col>
      </a-row>
      <a-divider />
      <a-row type="flex" justify="space-between">
        <a-col :span="10">标签：{{scenicData.tag}}</a-col>
        <a-col :span="4">页数：{{scenicData.pages}}</a-col>
        <a-col :span="4">详情页面： <a :href="scenicData.url">进入</a></a-col>
      </a-row>
      <a-divider />
      <a-row type="flex" justify="space-around">
        <a-col :span="24">简介：<i>{{scenicData.summary}}</i></a-col>
      </a-row>
      <a-divider />
      <a-row type="flex" justify="space-around">
        <a-col :span="24">作者介绍：<i>{{scenicData.authorIntro}}</i></a-col>
      </a-row>
      <a-divider />

    </div>

  </a-modal>
</template>

<script>
  export default {
    name: "ScenicInfo",
    props: {
      scenicData: {
        require: true
      },
      scenicVisiable: {
        require: true
      },
    },
    data() {
      return {

      }
    },
    methods: {
      modelClose() {
        this.$emit('close');
      },

    },
    watch: {
      scenicVisiable: function (val) {
        if(val) {

        }
      }
    }
  }
</script>

<style scoped>
  #scenicMap {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
</style>
